<template>
  <div class="video-info">
    <article class="col-lg-2 col-md-2 col-xs-3 post post-medium single-video">
      <div class="thumbr">
        <a class="post-thumb" :href="message.anime.uri">
          <span class="play-btn-border" title="Play"><i
            class="fa fa-play-circle headline-round" aria-hidden="true"></i></span>
          <div class="cactus-note ct-time font-size-1 tag-only" v-if="message.anime.tag === 1"><span>独家</span></div>
          <div class="cactus-note ct-time font-size-1 tag-vip" v-if="message.anime.tag === 2"><span>会员专享</span></div>
          <img class="img-responsive" :src="message.anime.cover === null ? defaultImg : message.anime.cover" alt="#">
        </a>
      </div>
    </article>
    <div class="col-lg-9">
      <a :href="message.anime.uri">
        <h3 class="title main-head-title"><span class="type-tag">番剧</span>&nbsp;<span v-html="message.anime.name"></span></h3>
      </a>
      <div class="metabox">
        <span class="meta-i">
          <i class="fa fa-user"></i><a href="javascript:;" class="author" title="John Doe">8bit（8-bit）</a>
        </span>
        <span class="meta-i">
          <i class="fa fa-clock-o"></i>{{ message.anime.startTime | startTimeFilter }}开播
        </span>
        <span class="meta-i">
          <i class="fa fa-eye"></i>{{ message.anime.count | countFormatFilter }} 播放
        </span>
        <div class="ratings">
          {{ message.anime.status | statusFilter }}&nbsp;&nbsp;&nbsp;&nbsp;{{ message.anime.score | scoreFilter }}
          <span v-html="printStar"></span>
        </div>
      </div>
      <div class="info">简介：{{ message.anime.info }}</div>
      <ul class="footer-tags">
        <li v-for="item in printItem" :key="item.id"><a :href="item.url" class="col-md-1">{{item.no}}</a></li>
      </ul>
    </div>
    <div class="clearfix"></div>
  </div>
</template>

<script>

export default {
  name: 'SearchItem',
  props: ['message'],
  data () {
    return {
      defaultImg: require('../../assets/img/thumbs/thumb-tab5.jpg')
    }
  },
  computed: {
    printStar: function () {
      const arr = [
        '<i class="fa fa-star" aria-hidden="true"></i>\n',
        '<i class="fa fa-star-half-o" aria-hidden="true"></i>\n',
        '<i class="fa fa-star-o" aria-hidden="true"></i>\n'
      ]
      let str = ''
      let int = parseInt(this.message.anime.score / 2)
      for (let i = 0; i < int; i++) {
        str += arr[0]
      }
      const float = parseFloat(this.message.anime.score % 1)
      if (float >= 0.5) {
        str += arr[1]
        int++
      }
      for (let i = 5 - int; i > 0; i--) {
        str += arr[2]
      }
      return str
    },
    printItem: function () {
      let length = this.message.list.length
      if (length <= 12) {
        return this.message.list
      }
      let show = this.message.list.slice(0, 9)
      let a = {id: length + 1, no: '.', url: 'javascript:;'}
      show.push(a)
      show = show.concat(this.message.list.slice(length - 2))
      return show
    }
  }
}
</script>

<style scoped>
.video-info {
  margin-bottom: 15px;
}
.type-tag {
  border: 2px solid #0cf;
  border-radius: 15px;
  padding: 0 10px;
  font-size: 15px;
  vertical-align: middle;
}
.info {
  max-height: 2.8em;
  overflow: hidden;
}
.footer-tags a {
  padding: 3px 12px;
}
</style>
